<template>
  <a-modal
    title="操作"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item style="display:none">
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="上级权限"
      >
        <a-tree-select
          v-decorator="['parentId', {rules: [{ required: true, message: '请选择上级权限' }]}]"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          :treeData="permissions"
          placeholder="上级权限"
          treeDefaultExpandAll
        >
        </a-tree-select>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="菜单类型"
      >
        <a-select v-decorator="['type', {initialValue:0,rules: [{ required: true, message: '请选择类型' }]}]" @select="menuTypeChange">
          <a-select-option :value="0">目录</a-select-option>
          <a-select-option :value="1">菜单</a-select-option>
          <a-select-option :value="2">按钮</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="权限名称"
      >
        <a-input
          v-decorator="['name',{rules: [{ required: true, message: '请输入权限名称' }]}]"
          placeholder="起一个名字"/>
      </a-form-item>

       <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="页面名称"
      >
        <a-input
          v-decorator="['pageName',{initialValue:''}]"
          placeholder="页面名称"/>
      </a-form-item>

      <!-- <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="动态菜单唯一键"
      >
        <a-input
          v-decorator="['menuKey',{initialValue:'',rules: [{ required: true, message: '请输入动态菜单唯一键' }]}]"
          placeholder="动态菜单唯一键"/>
      </a-form-item> -->

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="type!=0"
        label="权限标识"
      >
        <a-input
          v-decorator="['perms',{rules: [{ required: true, message: '请输入权限标识' }]}]"
          placeholder="权限标识"/>
      </a-form-item>

      <!-- <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="type===0"
        label="布局类型"
      >
        <a-select v-decorator="['menuLay', {initialValue:'PageView',rules: [{ required: true,message: '请选择类型' }]}]">
          <a-select-option :value="'PageView'">基础布局，包含了面包屑，和中间内容区 (slot)</a-select-option>
          <a-select-option :value="'RouterView'">空布局，专门为了二级菜单内容区自定义</a-select-option>
          <a-select-option :value="'BlankLayout'">空白的布局</a-select-option>
          <a-select-option :value="'BasicLayout'">基础页面布局，包含了头部导航，侧边栏和通知栏</a-select-option>
          <a-select-option :value="'UserLayout'">登陆注册页面的通用布局</a-select-option>
        </a-select>
      </a-form-item> -->

      <!-- <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="type===0"
        label="图标"
      >
        <a-input v-decorator="['icon',{rules: [{ required: true, message: '请选择图标' }]}]" ref="iconInput" @click="iconselect()" enterButton="选择图标" placeholder="选择图标">
          <a-icon slot="prefix" :type="icon" />
          <a-icon slot="suffix" type="close-circle" @click="emitEmpty"/>
        </a-input>
      </a-form-item> -->

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="显示顺序"
        style="display:none"
      >
        <a-input-number
          v-decorator="['orderNum',{initialValue:'1',rules: [{ required: true, message: '请输入顺序数字' }]}]"
          placeholder="显示顺序"/>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="状态"
      >
        <a-select v-decorator="['deleted', {initialValue:'UN_DELETED',rules: [{ required: true, message: '请选择状态' }]}]">
          <a-select-option :value="'UN_DELETED'">显示</a-select-option>
          <a-select-option :value="'DELETED'">隐藏</a-select-option>
        </a-select>
      </a-form-item>

    </a-form>
  </a-modal>
</template>
<script>
import { getMenuList } from '@/api/auth'
import { saveOne } from '@/api/adminMenu'
import pick from 'lodash.pick'
export default {
  name: 'MenuModal',
  components: {
  },
  data () {
    return {
      description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      permissions: [{ key: 0, value: '0', title: '无' }],
      mdl: {},
      icon: 'smile',
      type: '',
      form: this.$form.createForm(this)
    }
  },
  beforeCreate () {
  },
  mounted () {
    this.loadPermissions()
  },
  methods: {
    menuTypeChange (type) {
      this.type = type
    },
    emitEmpty () {
      this.$refs.iconInput.focus()
      this.form.setFieldsValue({ 'icon': '' })
    },
    iconselect () {
      this.$refs.modal.show()
    },
    setIcon (icon) {
      this.icon = icon
      this.form.setFieldsValue({ 'icon': icon })
    },
    add (record) {
      this.form.resetFields()
      let parentRecord = {};
      if (record == null || record == undefined) parentRecord = {parentId : 0}
      else parentRecord = {parentId: record.id, type: record.type +1, orderNum: record.orderNum+1}
      this.edit(parentRecord)
    },
    edit (record) {
      this.mdl = Object.assign({}, record)
      this.visible = true
      this.type = this.mdl.type || 0
      this.$nextTick(() => {
        // this.mdl.icon ? this.icon = this.mdl.icon : this.icon = 'smile'
        this.mdl.parentId += ''
        this.form.setFieldsValue(pick(this.mdl,  'id', 'parentId', 'type', 'perms', 'orderNum', 'name', 'pageName', 'deleted'))
        // this.form.setFieldsValue({ ...record })
      })
    },
    loadPermissions () {
      
      getMenuList().then(res => {
        this.permissions = this.permissions.concat(this.buildtree(res.data.dataList))
        console.log("this.permissions",this.permissions)
      })
    },
    buildtree (list) {
      let arr = []
      list.forEach(item => {
          item.title = item.name
          item.key = item.id
          item.value = item.id + ''
          if (item.children) {
            item.children = this.buildtree(item.children)
          }
          arr.push(pick(item, ['title','key','value','children']))
      })
      return arr;
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          saveOne(Object.assign(values, {nodePath:this.mdl.nodePath})).then(resp => {
            if (this.validResp(resp)) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.success(resp.msg)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
